<template>
  <div>
    <Spin size="large" fix v-if="spinShow"></Spin>
     <li class="node-li" :ref="'nodeLi'+node.level.toString()+index.toString()" :class="['node',node.children?'':'node-leaf']" v-for="(node,index) in data" :key='node.index' >
        <div  :ref="'nodeDivLi'+node.level.toString()+index.toString()" v-if="node.children" @click="node.open = !node.open;selectClick(node);selectNode(node)"
         class="li-hover-item" 
         :class="{designItemIndex:node.designColor==true?true:false}" 
         :style="{ paddingLeft: ( node.level*20 + 10 ) + 'px' }"       
                  @mouseover="isMove=true"
                  @mouseleave="isMove=false"
         >
        <Icon class="cursorIcon" :type="node.open ? 'md-arrow-dropdown' : 'md-arrow-dropright'" size="16"/>
        <span class="cursorIcon">{{node.name}}</span>     
        <span class='treeTool' v-if="node.designColor&&node.tool&&isMove">
          <span class="treeButton"  v-for=" (item,index) in node.tool" :key="index">
                         <span class="treeButtonBox">
                           <Icon type="ios-add"  v-if="item=='add'" @click="iconClick('add')" size='20'/> 
                           <Icon type="ios-brush"    v-if="item=='edit'" @click="iconClick('edit')"   size='20'/>            
                           <Icon type="ios-close"  v-if="item=='del'" @click="iconClick('del')" size='20'  />
                        </span>         
          </span>
        </span>       
        </div>
        <div v-else class="li-hover-item"
                    :class="{designItemIndex:node.designColor==true?true:false}" 
             :ref="'nodeDivLi'+node.level.toString()+index.toString()" 
            @click.stop='node.open = !node.open;selectItem(node);selectClick(node);selectNode(node)'
            :style="{ paddingLeft: ( node.level*20 + 10 ) + 'px' }"         
            >          
           <Icon class="cursorIcon" v-if="node.isParent==true" type="md-arrow-dropright" size="16"/>            
           <span class="cursorIcon" v-if="node.isParent==false" style="display:inline-block;width:16px;height:16px"></span>  
           <span class="cursorIcon">{{node.name}}</span>
           <span class='treeTool' v-if="node.designColor&&node.tool&&isMove">
              <span class="treeButton"  v-for=" (item,index) in node.tool" :key="index">
                            <span class="treeButtonBox">
                            <Icon type="ios-add"  v-if="item=='add'" @click="iconClick('add')" size='20'  />
                            <Icon type="ios-brush"    v-if="item=='edit'" @click="iconClick('edit')"   size='20'  />
                            <Icon type="ios-close"  v-if="item=='del'" @click="iconClick('del')" size='20'  />
                            </span>         
              </span>
           </span>
        </div>
        <!-- 支持slideDown slideUp效果的动画 -->
        <transition
            @before-enter="beforeEnter"
            @enter="enter"
            @after-enter="afterEnter"
            @before-leave="beforeLeave"
            @leave="leave"
            @after-leave="afterLeave">
            <ul v-if="node.children" v-show="node.open">
                <TreeNode :data="node.children" @getSelect='selectNode'  @iconClick="iconClick" @getColor="selectColor"></TreeNode>
            </ul>
        </transition>
    </li>
  </div>
</template>

<script>
import TreeNode from './TreeNode'
export default {
  name: 'TreeNode',
  props: ['data'],
  data () {
    return {
      designItemIndex:null,
      spinShow:false,
      isMove:false
    }
  },
  components: {
    TreeNode
  },
  watch:{
    spinShow(val){
      if(val){
        let that =this;
        setTimeout(function(){
        that.spinShow=false 
        },300)
      }
    }
  },
  mounted(){
  }
  ,
  methods: {
    isTool(val,select){
      if(val){
        if(select){
          return true
        }
        return false
      }
      return false
    },
   getClass(node,classname) { 
   if(node.getElementsByClassName) {
    return node.getElementsByClassName(classname);
 //如果存在该标签 就返回
   } else {
    var elems = node.getElementsByTagName(node),
      defualt = [];
    for (var i = 0; i < elems.length; i++) {
 //遍历所有标签
     if(elems[i].className.indexOf(classname) != -1) {
 //查找相应类名的标签
      defualt[defualt.length] = elems[i];
     }
    }
    return defualt;
   }
  },
    iconClick(val){
      this.$emit('iconClick',val)
    },
    selectClick(node){
      this.selectColor(node);
    },
    selectColor(val){
      this.$emit('getColor',val)
    },
    selectNode(node){
   this.$emit('getSelect',node)
    },
    selectItem: function (node) {
      node.checked = !node.checked
    },
    beforeEnter: function (el) {
      el.style.transition = '0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out'
      if (!el.dataset) el.dataset = {}
      el.dataset.oldPaddingTop = el.style.paddingTop
      el.dataset.oldPaddingBottom = el.style.paddingBottom
      el.style.height = 0
      el.style.paddingTop = 0
      el.style.paddingBottom = 0
    },
    enter: function (el) {
      el.dataset.oldOverflow = el.style.overflow
      if (el.scrollHeight !== 0) {
        el.style.height = el.scrollHeight + 'px'
        el.style.paddingTop = el.dataset.oldPaddingTop
        el.style.paddingBottom = el.dataset.oldPaddingBottom
      } else {
        el.style.height = ''
        el.style.paddingTop = el.dataset.oldPaddingTop
        el.style.paddingBottom = el.dataset.oldPaddingBottom
      }
      el.style.overflow = 'hidden'
    },
    afterEnter: function (el) {
      el.style.transition = ''
      el.style.height = ''
      el.style.overflow = el.dataset.oldOverflow
    },
    beforeLeave: function (el) {
      if (!el.dataset) el.dataset = {}
      el.dataset.oldPaddingTop = el.style.paddingTop
      el.dataset.oldPaddingBottom = el.style.paddingBottom
      el.dataset.oldOverflow = el.style.overflow
      el.style.height = el.scrollHeight + 'px'
      el.style.overflow = 'hidden'
    },
    leave: function (el) {
      if (el.scrollHeight !== 0) {
        el.style.transition = '0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out'
        el.style.height = 0
        el.style.paddingTop = 0
        el.style.paddingBottom = 0
      }
    },
    afterLeave: function (el) {
      el.style.transition = ''
      el.style.height = ''
      el.style.overflow = el.dataset.oldOverflow
      el.style.paddingTop = el.dataset.oldPaddingTop
      el.style.paddingBottom = el.dataset.oldPaddingBottom
    }
  }
}
</script>

<style lang="less" scoped >
    .treeTool{
       cursor: pointer;
      position: absolute;
      right: 5px;
      top:  calc(50% - 10px);
      display: inline-block;
      width: auto;
      height: 20px;
      padding: 0;
      margin: 0;
      white-space:nowrap;
      .treeButton{
        .treeButtonBox{
        display: flex;
        justify-content: center;
        align-items: center;
        }
        position: relative;
        top: -3px;
        width: 20px;
        height: 100%;
        color: #000000!important;
              display: inline-block;
              
              background-color: white;
      }
    }
    .node {
        line-height:36px;
        .li-hover-item{
          position: relative;
           cursor: pointer;
               border-radius: 5px;
            &:hover{
                background: #e9f4ff;
            }
        }
        .cover-ctn{
            position: absolute;
            left: 0;
        }
        .tree-node-mark{
            display: block;
            width: 14px;
            height: 14px;
            border: 1px solid red;
            border-radius: 50%;
            text-align: center;
            float: right;
            margin-right: 20px;
            margin-top: 7px;
            background: white;
            &.el-icon-circle-check{
                background: red;
            }
        }
    }
    .minus-sign-icon{
        position: relative;
        display: inline-block;
        width: 12px;
        height: 11px;
        border: 1px solid #A5A5A5;
        border-radius: 2px;
        vertical-align: middle;
        margin-top: -2px;
        &::before{
            content: '';
            display: inline-block;
            position: absolute;
            background: #8c8a8a;
            height: 2px;
            width: 6px;
            top: 4px;
            left: 3px;
        }
    }
    .plus-icon{
        position: relative;
        display: inline-block;
        width: 12px;
        height: 11px;
        border: 1px solid #A5A5A5;
        border-radius: 2px;
        vertical-align: middle;
        margin-top: -2px;
        &::before{
            content: '';
            display: inline-block;
            position: absolute;
            background: #8c8a8a;
            height: 2px;
            width: 6px;
            top: 4px;
            left: 3px;
        }
        &::after{
            content: '';
            display: inline-block;
            position: absolute;
            width: 2px;
            height: 7px;
            top: 2px;
            left: 5px;
            background: #8c8a8a;
        }
    }
    ul, li {
        // padding-left: 1em;
        list-style-type: none;
    }
    .close-open-icon{
        width: 14px;
        height: 14px;
        border-radius: 2px;
        border: 1px solid #A5A5A5;
        display: inline-block;
        text-align: center;
        line-height: 9px;
        font-size: 14px;
        font-weight: 400;
        vertical-align: middle;
        margin-top: -2px;
        margin-right: 4px;
    }
.designItemIndex{
  background: #2d8cf0 !important;
  color: #ffffff !important;
}
    .cursorIcon{
       cursor: pointer;
    }
</style>